@charset "UTF-8";
@import "config";

.ranking-box, .desk-box {
  height: 100%;
  transition: $tiSoSlow;
}
.desk-box {
  padding-top: hr(50);
}
.diy-box {
  padding-top: hr(25);
}
.box {
  height: hr(780);
  width: hr(440);
  padding: hr(25) hr(20) 0;
  margin: 0 auto;
  overflow-y: scroll;
  &.now-zoom{
    overflow: hidden;
  }
  .wrapper-big, .wrapper {
    position: relative;
    transition: $ti;
    text-align: center;
    z-index: 1;
    .center {
      @include posAbsAll;
      margin: auto;
      display: inline-block;
      text-align: center;
      background: #e7c598;
      border-radius: 50%;
      box-shadow: 1px 1px 1px black;
      span {
        color: $red;
        font-weight: bold;
      }
    }
    .circle {
      position: absolute;
      color: $red;
      border-radius: 50%;
      background: $yellow no-repeat center/cover;
      box-shadow: 1px 1px 1px black;
      overflow: hidden;
      .icon-yonghu {
        display: block;
        border-radius: 50%;
      }
    }
  }
  .wrapper-big .circle i,.zoom-in .circle i{
    animation: rock 2s infinite;
  }
  .wrapper-big {
    width: hr(190);
    height: hr(190);
    margin: 0 auto;
    .center {
      width: hr(120);
      height: hr(120);
      line-height: hr(120);
      span {
        font-size: hr(24);
      }
    }
    .circle {
      width: hr(44);
      height: hr(44);
      line-height: hr(44);
      .icon-yonghu {
        font-size: hr(20);
      }
    }
  }
  .wrapper {
    width: hr(135);
    height: hr(135);
    line-height: hr(135);
    margin: hr(26) 0;
    .center {
      width: hr(85);
      height: hr(85);
      line-height: hr(85);
      span {
        font-size: hr(20);
      }
    }
    .circle {
      width: hr(35);
      height: hr(35);
      line-height: hr(35);
      .icon-yonghu {
        font-size: hr(14);
      }
    }
    .icon-jia1 {
      font-size: hr(50);
      color: $red;
    }
  }
  //主宾席和客人席动画
  .wrapper-now .icon-yonghu{
    animation: rock 1.5s linear infinite;
  }
  .wrapper:nth-child(2n) {
    float: left;
  }
  .wrapper:nth-child(2n+1) {
    float: right;
  }

}
.word {
  margin-top: hr(33);
  text-align: center;
  font-size: hr(26);
  color: $yellow;
  transition: $tiSlow;
  p {
    font-weight: 600;
    em {
      display: inline-block;
      width: hr(50);
      color: $orange;
      vertical-align: bottom;
      border-bottom: 1px solid white;
    }
  }
}
#way3-pop, #way3-tips-pop, #dissatisfy-pop {
  .pop_box {
    .pop_up {
      padding: hr(100) hr(10);
      p {
        font-size: hr(28);
        font-weight: 600;
        em {
          display: inline-block;
          width: hr(90);
          color: $orange;
          vertical-align: bottom;
          border-bottom: 1px solid $red;
        }
      }
    }
  }
}

.word_tips {
  position: absolute;
  bottom: hr(150);
  left: 50%;
  transform: translateX(-50%);
  width: hr(440);
  color: $yellow;
  font-size: hr(30);
  font-weight: 600;
  text-align: center;
  em {
    display: inline-block;
    width: hr(40);
    height: hr(40);
    color: $orange;
    vertical-align: bottom;
    border-bottom: 1px solid white;
    &:first-child{
      width: hr(70);
    }
  }
}

.zoom-out {
  transform: scale(0);
  opacity: 0;
}
.tp-bg{
  @include posAbsAll;
  background-color: rgba(0,0,0,0);
  transition: $ti;
  transform-origin: center 80%;
}

.wrap_bg, .wrap_bg2, .small_bg {
  @include posAbsAll;
  margin: auto;
  z-index: 7;
  background: rgba(0, 0, 0, 0);
}

//点击坐下，清除动画
.active_ani {
  animation: none !important;
  color: $red !important;
}

@keyframes rock {
  10% {
    transform: rotate3d(0, 0, 1, 25deg)
  }
  20% {
    transform: rotate3d(0, 0, 1, -25deg)
  }
  30% {
    transform: rotate3d(0, 0, 1, 20deg)
  }
  40% {
    transform: rotate3d(0, 0, 1, -20deg)
  }
  50%,100% {
    transform: rotate3d(0, 0, 1, 0deg)
  }
}